<template>
  <div class="box" style="margin-top:30px;">
    <!-- <img class="img" alt="Vue logo" style="width: 24px; height: 24px" src="./img/icon.png" /> -->
    <z-table class="item2" ref="table" :showAlert="false" :columns="columns" :dataSource="pageData"
      :showSelection="false" :loading="loading" :showPagination="true" rowKey="id" @change="onTableChange">
      <template slot="order" slot-scope="text, record, index">
        {{ index + 1 }}
      </template>
      <template slot="planTime" slot-scope="text, record, index">
        <!-- {{ getIndex(index) }} -->
        <a-range-picker v-if="isEdit[getIndex(index)]" v-model="recordData[getIndex(index)].planTime" :allowClear="true"
          valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
        <span v-else>{{ setStr1(recordData[getIndex(index)].planTime) }}</span>
      </template>
      <template slot="typeIntervention" slot-scope="text, record, index">
        <a-select v-if="isEdit[getIndex(index)]" allowClear v-model="recordData[getIndex(index)].typeIntervention"
          style="width:100%;" placeholder="选择区域">
          <a-select-option v-for="item in options" :key="item.value">
            {{ item.title }}
          </a-select-option>
        </a-select>
        <!-- <a-input v-if="isEdit[getIndex(index)]" v-model="recordData[getIndex(index)].userName" placeholder="请输入" /> -->
        <span v-else>{{ setStr2(text) }}</span>
      </template>
      <template slot="taskVolume" slot-scope="text, record, index">
        <a-input-number v-if="isEdit[getIndex(index)]" v-model="recordData[getIndex(index)].taskVolume"
          placeholder="请输入" style="width:100%;" />
        <span v-else>{{ recordData[getIndex(index)].taskVolume }}</span>
      </template>
      <template slot="action" slot-scope="text, record, index">
        <a-space size="large">
          <!-- {{ getIndex(index) }}
          {{ record.id }}
          {{ pageData.pages }} -->
          <template v-if="isEdit[getIndex(index)]">
            <a @click="onConfirm(getIndex(index))">保存</a>
            <a-popconfirm title="是否要取消记录吗?" ok-text="是" cancel-text="否" @confirm="onCancel(getIndex(index))">
              <a>取消</a>
            </a-popconfirm>
          </template>
          <template v-else>
            <a @click="onEdit(getIndex(index))">编辑</a>
            <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(getIndex(index))">
              <a>删除</a>
            </a-popconfirm>
          </template>

        </a-space>
      </template>
    </z-table>
    <a-button class="addBtn" type="dashed" block @click="onAdd">+ 添加</a-button>
  </div>
</template>

<script>
import { getDictItemsFromCache } from '@/api/api'
// import * as caseApi from '@/api/wxSmuggle/caseEvent.js'
export default {
  // components: { CustomTable, ImportModal },
  data() {
    return {
      pageData: {},
      columns: [
        {
          title: '计划时间',
          dataIndex: 'planTime',
          align: 'left',
          width: 300,
          scopedSlots: { customRender: 'planTime' }
        },
        {
          title: '介入类型',
          dataIndex: 'typeIntervention',
          align: 'left',
          width: 200,
          scopedSlots: { customRender: 'typeIntervention' }
        },
        {
          title: '任务量',
          dataIndex: 'taskVolume',
          align: 'left',
          width: 200,
          scopedSlots: { customRender: 'taskVolume' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'left',
          scopedSlots: { customRender: 'action' },
          width: 150
        }
      ],
      isEdit: [],
      isEditCancel: [],
      isBeforeEditValue: {},
      recordData: [],
      options: getDictItemsFromCache('typeIntervention'),
      loading: false,
      size: 5
    }
  },

  created() { },
  methods: {
    onClearRowKeys() {
      this.$refs.table.onClearRowKeys()
    },
    getIndex(index) {
      return (this.pageData.current - 1) * this.pageData.size + index
    },
    onAdd() {
      // console.log(this.recordData.length)
      //插入第一个
      if (this.recordData.length > 1000) {
        this.$message.warning('数量不能超过1000条！')
        return
      }
      this.recordData.unshift({ planTime: [], typeIntervention: undefined, taskVolume: '' })
      this.isEdit.unshift(true)
      this.isEditCancel.unshift(false)
      console.log(this.recordData)
      //页面跳到第一页
      this.refreshTable(1)
    },
    refreshTable(current) {
      this.loading = false
      this.pageData = {
        current: current,
        pages: parseInt((this.recordData.length - 1) / this.size) + 1,
        size: this.size,
        records: this.recordData,
        total: this.recordData.length
      }
    },
    onEdit(index) {
      this.$set(this.isEdit, index, true)
      this.$set(this.isEditCancel, index, true)
      // console.log(this.recordData[index])
      //保存编辑前的值
      this.isBeforeEditValue = {
        planTime: this.recordData[index].planTime,
        taskVolume: this.recordData[index].taskVolume,
        typeIntervention: this.recordData[index].typeIntervention
      }
    },
    onCancel(index) {
      // console.log(this.isEditCancel[index])
      if (this.isEditCancel[index]) { //此时取消操作就是恢复编辑前的值
        this.$set(this.recordData[index], 'planTime', this.isBeforeEditValue.planTime)
        this.$set(this.recordData[index], 'taskVolume', this.isBeforeEditValue.taskVolume)
        this.$set(this.recordData[index], 'typeIntervention', this.isBeforeEditValue.typeIntervention)
        // console.log(this.recordData[index])
      } else { //此时取消操作就是清空
        this.recordData[index].planTime = []
        this.recordData[index].typeIntervention = undefined
        this.recordData[index].taskVolume = ''
      }

    },
    onDelete(index) {
      this.recordData.splice(index, 1)
      this.isEdit.splice(index, 1)
      //页面跳到第一页
      this.loading = true
      setTimeout(() => {
        this.refreshTable(1)
      }, 1000)
    },
    rangePickerChange(index) {
      console.log(index)
      // this.$set(this.recordData, index, date[0])
      // this.$set(this.recordData, index, date[1])
    },
    setStr1(arr) {
      // console.log(arr)
      return arr.join(" ~ ")
    },
    setStr2(text) {
      return this.$filterDictTextByCache('typeIntervention', text)
    },

    onConfirm(index) {
      // console.log('11111111111111')
      // console.log(index, this.recordData[index].phoneNumber)
      if (this.recordData[index].planTime.length <= 0) {
        this.$message.warning('计划时间不能为空！')
        return
      }
      if (this.recordData[index].typeIntervention == '' || this.recordData[index].typeIntervention == undefined) {
        this.$message.warning('介入类型不能为空！')
        return
      }
      if (this.recordData[index].taskVolume == '' || this.recordData[index].taskVolume == undefined) {
        this.$message.warning('任务量不能为空！')
        return
      }
      this.$set(this.isEdit, index, false)
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.refreshTable(pagination.pageNo)
    },
    onValidate() {
      let flag = true
      if (this.recordData.length <= 0) {
        this.$message.warning('行动计划表不能为空')
        flag = false
      }
      if (flag) {
        this.isEdit.forEach(item => {
          if (item) {
            this.$message.warning('请保存行动计划表数据')
            flag = false
          }
        })
      }
      return flag
    },
    getData() {
      this.recordData.forEach(item => {
        item.planStartTime = item.planTime[0]
        item.planEndTime = item.planTime[1]
      })
      console.log(this.recordData)
      return this.recordData
    },
    setData(arr) {
      this.recordData = arr
      this.refreshTable(1)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-pagination-options-size-changer.ant-select {
  display: none;
}

.box {
  position: relative;
  overflow: hidden;
  // height: 500px;

  .item1 {
    float: left;
    width: 35%;
    height: 100%;
  }

  .item2 {
    // float: left;
    // width: 55%;
    height: 100%;
    margin-left: 5%;
  }

  .addBtn {
    // position: absolute;
    // left: 37%;
    // top: 0;
    width: 95%;
    margin-bottom: 20px;
    margin-left: 5%;
  }

  .img {
    position: absolute;
    left: 39%;
    top: 45%;
  }

  /deep/.ant-table-wrapper {
    height: 100%;
  }

  /deep/.ant-table-placeholder {
    border-bottom: none;
  }
}
</style>
